import React, { useContext, useState, useEffect } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import userQuesContext from "../../../context/questionnaire/UserQuesContext";
import UserProblemContext from "../../../context/questionnaire/UserProblem";
import MyQuesContext from "../../../context/questionnaire/MyQuesContext";

const UserQuesHome = ({ navigation }) => {
  const { getQuesTemplate } = useContext(userQuesContext);
  const { getProTemplate } = useContext(UserProblemContext);
  const { getMyQues } = useContext(MyQuesContext);

  useEffect(() => {
    getQuesTemplate();
    getProTemplate();
    // getMyQues(1);
  }, []);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[styles.card, { marginTop: 20 }]}
        onPress={() => navigation.navigate("问卷操作")}
      >
        <View style={styles.content}>
          <Text style={styles.title}>问卷填写</Text>
          <Text style={styles.subtitle}>Questionnaire filling</Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.card, { backgroundColor: "#F47C68" }]}
        onPress={() => navigation.navigate("意见反馈")}
      >
        <View style={styles.content}>
          <Text style={styles.title}>意见反馈</Text>
          <Text style={styles.subtitle}>Feedback</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    // marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "#fffafa",
    backgroundColor: "white",
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "center",
  },

  card: {
    backgroundColor: "#8ABAFF",
    height: "22%",
    width: "90%",
    margin: 5,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 4,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "grey", // 设置阴影色
  },
  content: {
    justifyContent: "center",
    alignItems: "center",
  },

  title: {
    fontSize: 22,
    alignItems: "center",
    color: "#fff",
    marginBottom: 5,
  },
  subtitle: {
    fontSize: 16,
    alignItems: "center",
    color: "#fff",
    letterSpacing: 3,
    textTransform: "uppercase",
  },
});

export default UserQuesHome;
